<html>
<head>
   <title>Easy skinable design</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />


<link rel="STYLESHEET" type="text/css" href="dhtmlxtree.css">
<script  src="dhtmlxcommon.js"></script>
<script  src="dhtmlxtree.js"></script>
<script type="text/javascript" src="jQuery1.6.2.js"></script>
<script type="text/javascript" src="jquery.contextmenu.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  //$(document).bind("contextmenu",function(){return false;});
  //$(document).bind("selectstart",function(){return false;});

  $('span').contextMenu('jqueryDtreeMenu', {
    onContextMenu: function(e) {

      if(1){
          return true;
      }else return false;
    },
    bindings: {
      'new':function(t){
      alert(t.id);
        location.reload();
      },
      'refresh': function(t) {
        location.reload();
      }
    }
  });

});
</script>

<div class="contextMenu" id="jqueryDtreeMenu" style="display:none;">
  <ul>
    <li id="new"><img src="folder.png" /><span class="m">新建</span></li>
    <li id="refresh"><img src="refresh.png" /><span class="m">刷新</span></li>
  </ul>
</div>










<script>function setDesign(n) {
    switch (n) {
    case 4:
        ;
        tree.enableTreeLines(true);
        tree.setImageArrays("plus", "plus2.gif", "plus3.gif", "plus4.gif", "plus.gif", "plus5.gif");
        tree.setImageArrays("minus", "minus2.gif", "minus3.gif", "minus4.gif", "minus.gif", "minus5.gif");
        tree.setStdImages("book.gif", "books_open.gif", "books_close.gif");
        break;
        break;
    case 3:
        ;
        tree.enableTreeLines(true);
        tree.setImageArrays("plus", "open2.gif", "open2.gif", "open2.gif", "open2.gif", "open2.gif");
        tree.setImageArrays("minus", "close2.gif", "close2.gif", "close2.gif", "close2.gif", "close2.gif");
        tree.setStdImages("leaf.gif", "folderOpen.gif", "folderClosed.gif");
        break;
    case 2:
        ;
        tree.enableTreeLines(true);
        tree.setImageArrays("plus", "open2.gif", "open2.gif", "open2.gif", "open2.gif", "open2.gif");
        tree.setImageArrays("minus", "close2.gif", "close2.gif", "close2.gif", "close2.gif", "close2.gif");
        tree.setStdImages("book.gif", "books_open.gif", "books_close.gif");
        break;
    case 1:
        ;
        tree.enableTreeLines(false);
        tree.setImageArrays("plus", "", "", "", "plus_ar.gif", "plus_ar.gif");
        tree.setImageArrays("minus", "", "", "", "minus_ar.gif", "minus_ar.gif");
        tree.setStdImages("book.gif", "books_open.gif", "books_close.gif");
        break;
    }
    tree.refreshItem(0);
}</script>
<table>
    <tr>
        <td valign="top">

            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div><br>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
        <a href="javascript:void(0)" onclick="setDesign(1);">Set design 1</a><br>
        <a href="javascript:void(0)" onclick="setDesign(2);">Set design 2</a><br>
        <a href="javascript:void(0)" onclick="setDesign(3);">Set design 3</a><br>
        <a href="javascript:void(0)" onclick="setDesign(4);">Set design 4</a><br>

        </td>
    </tr>
</table>
<input type="text" id="mm" value="">
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("./imgs/");
tree.enableDragAndDrop(0);
tree.enableTreeLines(false);
tree.setOnRightClickHandler(function(id){
  //var i=tree.getSelectedItemId();
  //alert(i);
tree.selectItem(id);

  $("#mm").val(id);
})
tree.setXMLAutoLoading("tree4.xml");
tree.loadXML("tree4.xml");

function setColor(color1, color2){
tree.setItemImage2(tree.getSelectedItemId(),'but_cut.gif','lock.gif','folderOpen.gif');
    tree.setItemColor(tree.getSelectedItemId(), color1, color2);
}
</script>

<input type="button" value="获取节点ID" onclick="tree.setItemText(tree.getSelectedItemId(),'www');" />
<br>
<input type="button" value="设置节点的文本颜色" onclick="setColor('#ff0000','#aa1100');" />